<template>
    <div>
      <button @click="changeDate">三天</button>
      <vue-datepicker v-model="startDate" :picker-options="pickerOptions"></vue-datepicker>
      <vue-datepicker v-model="endDate" :picker-options="pickerOptions"></vue-datepicker>
    </div>
  </template>
  
  <script setup>
  import { ref, watch } from 'vue';
  
  // 创建startDate和endDate变量并初始化为最近三天的范围日期
  const today = new Date();
  const endDate = ref(new Date(today.getFullYear(), today.getMonth(), today.getDate()));
  const startDate = ref(new Date(today.getFullYear(), today.getMonth(), today.getDate() - 2));
  
  // 创建pickerOptions对象
  const pickerOptions = {
    // 禁用未来日期
    disabledDate(time) {
      return time.getTime() > Date.now();
    }
  };
  
  // 监听startDate和endDate的变化，并保持日期范围为三天
  watch([startDate, endDate], () => {
    const diff = endDate.value.getTime() - startDate.value.getTime();
    if (diff > 2 * 24 * 60 * 60 * 1000) {
      // 如果日期范围超过三天，则将endDate调整为startDate加两天
      endDate.value = new Date(startDate.value.getFullYear(), startDate.value.getMonth(), startDate.value.getDate() + 2);
    }
  });
  
  // 切换日期范围为近三天
  const changeDate = () => {
    const today = new Date();
    startDate.value = new Date(today.getFullYear(), today.getMonth(), today.getDate() - 2);
    endDate.value = new Date(today.getFullYear(), today.getMonth(), today.getDate());
  };
  </script>  